<template>
	<view class="h_100 bg-white p-4">
		<view class=" h4">为了保证您本人操作，请先完成验证</view>
		<u--form :model="userName" :rules="rules" ref="userName">
			<u-form-item prop="phone">
				<view class="wsd_input c_9 h4 mt-3">
					<u--input class="wsd_input common" maxlength="11" placeholder="请输入手机号" border="none" v-model="userName.phone" clearable disabled="true"></u--input>
				</view>
			</u-form-item>
			<u-form-item prop="code" ref="code">
				<view class="wsd_input c_9 h4 mt-4 flex justify-between">
					<u-input class="wsd_input common" placeholder="请输入验证码" maxlength="6" border="none" v-model="userName.code" clearable>
						<template slot="suffix">
							<view class="right_text h4 flex align-center">
								<text>|</text>
								<view class="">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
								</view>
							</view>
						</template>
					</u-input>
				</view>
			</u-form-item>
		</u--form>
		<button class="next_btn common h4 text-white my-5" @click="userNameVerify">下一步</button>
		<u-popup :show="popupShow" mode="center" @close="popupShow=false">
			<view class="p-3 popup_img">
				<view v-if="nextMsg" class="text-center h6 c_9">{{ nextMsg }}</view>
				<image v-if="isSuccess" src="/static/img2/my/success.png" mode=""></image>
				<image v-else src="/static/img2/my/error.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { userUpPwd } from '@/api/my/safety.js';
import { register } from '@/api/login/login.js';
export default {
	data() {
		return {
			userName: {
				phone: '',
				code: ''
			},
			psd: '', //密码
			rules: {
				phone: [
					{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					{
						type: 'string',
						required: true,
						pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
						message: '请填写正确的手机号',
						trigger: ['blur', 'change']
					}
				],
				code: [
					{
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					{
						type: 'string',
						message: '账号应为6位数字',
						min: 4,
						// pattern: /^[0-9]{4|6}$/,
						trigger: ['blur']
					}
				]
			},
			tips: '',
			popupShow: false,
			isSuccess: true,
			nextMsg: ''
		};
	},
	onReady() {
		this.$refs.userName.setRules(this.rules);
	},
	onLoad(option) {
		this.psd = option.psd;
		this.userName.phone = option.phone
	},
	methods: {
		// 发送验证码
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			this.$refs.userName
				.validateField('phone')
				.then(res => {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						});
						register({ phone: this.userName.phone }).then(res => {
							// console.log('验证码', res);
							if (res.code == 0) {
								uni.hideLoading();
								uni.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						uni.$u.toast('稍等哦！');
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 账号修改
		async userNameVerify() {
			let that = this;
			that.$refs.userName
				.validate()
				.then(async e => {
					let msg = {
						token: uni.getStorageSync('userInfo').token || '',
						code: this.userName.code,
						phone: this.userName.phone,
						password: this.psd
					};
					userUpPwd(msg)
						.then(res => {
							this.popupShow = false;
							if (res.code == 0) {
								this.isSuccess = true;
								uni.$u.toast('请重新登录');
								setTimeout(() => {
									this.$store.dispatch('login/Logout', uni.getStorageSync('userInfo').token || '').then(res => {
										if (res.code == 0) {
											uni.reLaunch({
												url: '/subPages/login/psd_login'
											});
										}
									});
								}, 1500);
							} else {
								this.isSuccess = false;
								this.nextMsg = res.msg;
							}
						})
						.catch(err => {
							console.log('修改账号失败', err);
						})
						.finally(() => {
							this.popupShow = true;
						});
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.common {
	width: 100%;
	height: 98rpx;
	border-radius: 49rpx;
	line-height: 98rpx;
}
.wsd_input {
	width: 100%;
	background: #f5f5f5;
	padding: 0 50rpx;
	border-radius: 49rpx;
}
.next_btn {
	background: #cd1a2d;
}

::v-deep .u-input__content {
	height: 98rpx;
	border-radius: 49rpx;
}
.right_text {
	line-height: 98rpx;
	color: #4e6ef3;
	text {
		color: #999999;
		margin: 0 20rpx 0 10rpx;
	}
}
.popup_img {
	width: 630rpx;
	height: 366rpx;
	background-color: $color2;
	position: relative;

	image {
		width: 90rpx;
		height: 144rpx;
		border-radius: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
}
::v-deep .u-safe-bottom {
	padding: 0;
}
</style>
